<script setup lang="tsx">
import { PropType, reactive, ref } from 'vue'

import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { useTable } from '@/hooks/web/useTable'
import { GetPlanExamResultsApi, PalyIMGApi, PalyVideoApi } from '@/api/course'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { useI18n } from 'vue-i18n'
import { ElTable, ElTableColumn } from 'element-plus'
import { BaseButton } from '@/components/Button'
import { Dialog } from '@/components/Dialog'
import lookVideos from './lookVideos.vue'
import { VideoDt } from '@/api/course/type'

import { createImageViewer } from '@/components/ImageViewer'
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => undefined
  },
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => []
  }
})
const { t } = useI18n()
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    let res = await GetPlanExamResultsApi({ examGuid: props.currentRow?.guid })
    let list = res.data || []
    return {
      list: list || [] //.list
    }
  }
})

const lookimg = (url) => {
  createImageViewer({
    urlList: [url]
  })
}
const { dataList, loading } = tableState

const videoList = ref<VideoDt[]>([])
const dialogVisible = ref(false)

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'expand',
    type: 'expand',
    slots: {
      default: (data: TableSlotDefault) => {
        const { row } = data

        return (
          <ElTable data={row.details} border size="small" style={{ margin: '10px' }}>
            <ElTableColumn label="分项" prop="scoreItem" />
            <ElTableColumn label="分值" prop="scoreValue" />
            <ElTableColumn label="得分" prop="score" />
          </ElTable>
        )
      }
    }
  },
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  {
    field: 'userNo',
    label: t('userDemo.userNo')
  },
  {
    field: 'userName',
    label: t('userDemo.username')
  },
  {
    field: 'examScore',
    label: '分数',
    width: 80
  },
  // {
  // field: 'recordTime',
  // label: '录入时间'
  // },
  {
    field: 'videoTime',
    label: '视频时长',
    slots: {
      default: (data: any) => {
        let videoLength = data.row.videoTime
        let hour = parseInt(videoLength / 3600 + '')
        let minute = parseInt((videoLength % 3600) / 60 + '')
        let second = parseInt((videoLength % 60) + '')

        return <>{data.row.videoTime ? `${hour}小时${minute}分钟${second}秒` : ''}</>
      }
    }
  },
  {
    field: 'imagePath',
    label: '图片',
    slots: {
      default: (data: any) => {
        let videoPath = data.row.imagePath
        return (
          <>
            {videoPath ? (
              <BaseButton
                type="primary"
                onClick={() => {
                  PalyIMGApi({ imageGuid: data.row.guid }).then((res) => {
                    lookimg(res.data || '')
                  })
                }}
              >
                查看
              </BaseButton>
            ) : null}
          </>
        )
      }
    }
  },
  {
    field: 'videoPath',
    label: '视频',
    slots: {
      default: (data: any) => {
        let videoPath = data.row.videos
        return (
          <>
            {videoPath ? (
              <BaseButton
                type="primary"
                onClick={() => {
                  dialogVisible.value = true
                  videoList.value = videoPath.map((item: any) => {
                    let videoLength = item.videoTime
                    let hour = parseInt(videoLength / 3600 + '')
                    let minute = parseInt((videoLength % 3600) / 60 + '')
                    let second = parseInt((videoLength % 60) + '')
                    return {
                      ...item,
                      videoTime: `${hour}小时${minute}分钟${second}秒`
                    }
                  })
                }}
              >
                查看
              </BaseButton>
            ) : null}
          </>
        )
      }
    }
  }
])
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
  <Table
    :columns="tableColumns"
    :data="dataList"
    :loading="loading"
    @register="tableRegister"
    rowKey="guid"
  />
  <Dialog v-model="dialogVisible" title="视频" :fullscreen="false">
    <lookVideos :videoList="videoList" />
    <template #footer>
      <BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
    </template>
  </Dialog>
</template>
